<template>
  <div class="Pcart">
    <van-nav-bar
      title="我的购物车"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <van-swipe-cell v-for="item in cartList" :key="item.id">
      <van-card :price="item.price" :title="item.name" class="goods-card">
        <template #thumb>
          <div class="left-thumb">
            <van-checkbox
              v-model="item.state"
              @click="setSingleState"
            ></van-checkbox>
            <img :src="item.pic" alt="" style="width: 70%; fit: cover" />
          </div>
        </template>
        <template #num>
          <van-stepper v-model="item.num" theme="round" button-size="22" />
        </template>
      </van-card>

      <template #right>
        <van-button
          square
          text="删除"
          type="danger"
          class="delete-button"
          @click="deleteProduct(item.id)"
        />
      </template>
    </van-swipe-cell>
    <van-submit-bar
      :price="totalPrice"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox :value="stateAll" @click="setStateAll">全选</van-checkbox>
      <template #tip>
        你的收货地址不支持同城送,
        <span @click="onClickEditAddress">修改地址</span>
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
// mapActions: 让methods中的方法与actions中方法对应， 当触发methods中方法时，自动执行actions中对应方法
import { mapGetters, mapActions } from "vuex";
export default {
  computed: {
    ...mapGetters(["cartList", "stateAll", "totalPrice"]),
  },
  methods: {
    //单选状态
    ...mapActions(["setSingleState", "setStateAll", "deleteProduct"]),
    //提交订单
    onSubmit() {
       let state=this.$store.getters.stateAll
       if (state) {
         this.$toast.success("订单已提交，正在为你更新物流信息");
          setTimeout(() => {
           this.$router.push('/cart/order')
          }, 3000);
       }else{
          this.$toast.fail('请结算商品')
       }
         
    },
    //收贷地址
    onClickEditAddress() {
      this.$router.push('/cart/paddress')
    },
  },
};
</script>

<style lang="scss" scoped>
.Pcart{
  padding-bottom: 1.5rem;
}
.van-submit-bar{
  padding-bottom: 1.2rem;
}
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
.van-card__thumb {
  width: 1.9rem;
  .left-thumb {
    display: flex;
    width: 1.9rem;
    .van-checkbox {
      margin-right: 0.1rem;
    }
  }
}
</style>